<template>
  <div>
    <div class="box">
      客户信息
      <FilterTable
        ref="table"
        :columns="customerColumns"
        :dataSource="customerList"
        :isSelectColumn="false"
        :isToperInfo="false"
        :height="'auto'"
        columnsRef="ysjSaelsVisitDetail2019092502Table"
        :onColumnsChange="columns => (this.answerColumns = columns)"
      >
      </FilterTable>
    </div>

    <div class="box">
      联系人信息
      <FilterTable
        ref="contactsTable"
        :columns="contactsColumns"
        :dataSource="contactsList"
        :isSelectColumn="false"
        :isToperInfo="false"
        :height="'auto'"
        columnsRef="ysjSaelsVisitDetail2019092503Table"
        :onColumnsChange="columns => (this.answerColumns = columns)"
      >
        <!-- <template slot="controls">
          <el-button size="small" type="primary" icon="el-icon-plus" @click="addContacts()">新增联系人</el-button>
        </template> -->
      </FilterTable>
    </div>

    <div class="box">
      关爱信息
      <FormPanel ref="formPanel" :list="formList" :formType="type" labelWidth="100" :isSubmitBtn="false" @formChange="formChangeHandle" />
    </div>

    <div class="app-container box">
      <!-- tabs标签 -->
      <div class="form-row">
        <el-row>
          <el-tabs v-model="activeName" type="border-card">
            <el-tab-pane label="关爱问卷" name="careQuestionnaire">
              <careQuestionnaire ref="careQuestionnaire" :type="type" :questionnaireId="returnVisitContent" :customerCareId="customerCareId"
            /></el-tab-pane>
            <el-tab-pane label="关爱任务" name="caretask"><caretask ref="careTask" :employeeId="employeeId" :careTargetId="careTargetId"/></el-tab-pane>
            <el-tab-pane label="关爱记录" name="careHistory"><careHistory ref="careHistory"/></el-tab-pane>
          </el-tabs>
        </el-row>
      </div>
    </div>

    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'right'
      }"
    >
      <el-button @click="closeDialog">取 消</el-button>
      <el-button v-if="type !== 'show'" type="primary" @click="saveDialog">关 爱</el-button>
    </div>
  </div>
</template>
<script>
import { dictionary } from '@/utils/dictMixin';
import { formatdate } from '@/utils/index';
import { getCareInfo, getPotentials, queryCustomerContactList, insertCareRecord } from '@/api/customerRepair/visitRules/salesVisit2';
import careQuestionnaire from '../../tabs/careQuestionnaire.vue';
import caretask from '../../tabs/careTask.vue';
import careHistory from '../../tabs/careHistory.vue';

export default {
  name: 'SalesVisitDetail',
  components: {
    careQuestionnaire,
    caretask,
    careHistory
  },
  mixins: [dictionary],
  props: {
    billId: String,
    careTargetId: String,
    employeeId: String,
    type: String,
    returnVisitContent: String,
    customerCareId: String,
    recordVersion: String
  },
  data() {
    return {
      customerColumns: this.createCustoemrFormList(),
      contactsColumns: this.createContactsFormList(),
      contactsList: [],
      customerList: [],
      saveData: {},
      formList: this.createFormList(),
      activeName: 'careQuestionnaire'
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      getCareInfo(this.careTargetId).then(res => {
        if (res.resultCode == 200) {
          this.formList.forEach(x => {
            if (x.fieldName == 'nextCareDate') {
              x.initialValue = formatdate(new Date(parseInt(res.data[x.fieldName])), 1);
            } else {
              x.initialValue = res.data[x.fieldName];
            }
          });
        } else {
          this.$message.error('查询关爱信息失败!');
        }
      });
      getPotentials(this.billId).then(res => {
        if (res.resultCode == 200) {
          let result = [];
          result.push(res.data);
          this.customerList = result;
        } else {
          this.$message.error('查询客户信息失败!');
        }
      });
      queryCustomerContactList({ customerBusinessId: 52 }).then(res => {
        if (res.resultCode == 200) {
          this.contactsList = res.data;
        } else {
          this.$message.error('查询联系人失败!');
        }
      });
    },
    createFormList() {
      return [
        {
          type: 'INPUT',
          label: '关爱名称',
          disabled: true,
          fieldName: 'careName'
        },
        {
          type: 'SELECT',
          label: '关爱方式',
          disabled: true,
          itemList: this.createDictList('1587'),
          fieldName: 'careWay'
        },
        {
          type: 'SELECT',
          label: '关爱状态',
          fieldName: 'careStatus',
          itemList: this.createDictList('1592'),
          rules: [{ required: true, message: '请选择关爱状态', trigger: 'blur' }],
          change: val => {
            if (val == 15921004) {
              this.formList[6].disabled = false;
              this.formList[6].rules = [{ required: true, message: '请选择失败原因', trigger: 'blur' }];
            } else {
              this.formList[6].disabled = true;
              this.formList[6].rules = [];
              this.formList[6].initialValue = '';
            }
            if (val == 15921003) {
              this.formList[5].rules = [{ required: true, message: '请选择总体满意度', trigger: 'blur' }];
            } else {
              this.formList[5].rules = [];
            }
          }
        },
        {
          type: 'DATE',
          label: '下次关爱日期',
          fieldName: 'nextCareDate',
          rules: [{ required: true, message: '请选择下次关爱日期', trigger: 'blur' }]
        },
        {
          type: 'INPUT',
          label: '关爱内容',
          fieldName: 'careContent',
          rules: [{ required: true, message: '请输入关爱内容', trigger: 'blur' }]
        },
        {
          type: 'SELECT',
          label: '总体满意度',
          fieldName: 'satisfaction',
          itemList: this.createDictList('1075')
        },
        {
          type: 'SELECT',
          label: '失败原因',
          disabled: true,
          fieldName: 'careFailureReason',
          itemList: this.createDictList('1594')
        }
      ];
    },
    createCustoemrFormList() {
      return [
        {
          title: '客户名称',
          dataIndex: 'customerName',
          filterType: 'input'
        },
        {
          title: '销售顾问',
          dataIndex: 'consultant',
          filterType: 'input'
        },
        {
          title: 'VIN',
          dataIndex: 'salesVin',
          filterType: 'input',
          width: 150
        },
        {
          title: '品牌',
          dataIndex: 'brandName',
          filterType: 'input'
        },
        {
          title: '车系',
          dataIndex: 'seriesName',
          filterType: 'input'
        },
        {
          title: '车型',
          dataIndex: 'modelName',
          filterType: 'input'
        },
        {
          title: '出库日期',
          dataIndex: 'stockInOutDate',
          filterType: 'input',
          render: props => {
            if (props.row.stockInOutDate && props.row.stockInOutDate != '') {
              return <div>{formatdate(new Date(parseInt(props.row.stockInOutDate)), 1)}</div>;
            }
          }
        },
        {
          title: '性别',
          dataIndex: 'gender',
          filterType: 'input',
          render: props => {
            return <div>{this.createDictText(props.row.gender, '1002')}</div>;
          }
        },
        {
          title: '地址',
          dataIndex: 'address',
          filterType: 'input'
        },
        {
          title: '联系人',
          dataIndex: 'customerName2',
          filterType: 'input',
          render: props => {
            return <div>{props.row.customerName}</div>;
          }
        },
        {
          title: '联系人手机',
          dataIndex: 'mobilePhone',
          filterType: 'input'
        },
        {
          title: '联系人电话',
          dataIndex: 'phone',
          filterType: 'input'
        },
        {
          title: '省份',
          dataIndex: 'province',
          filterType: 'input'
        },
        {
          title: '城市',
          dataIndex: 'city',
          filterType: 'input'
        },
        {
          title: '区县',
          dataIndex: 'district',
          filterType: 'input'
        },
        {
          title: 'Email',
          dataIndex: 'eMail',
          filterType: 'input'
        },
        {
          title: '客户类型',
          dataIndex: 'customerType',
          filterType: 'input',
          render: props => {
            return <div>{this.createDictText(props.row.customerType, '1523')}</div>;
          }
        },
        {
          title: '婚姻状况',
          dataIndex: 'maritalStatus',
          filterType: 'input'
        },
        {
          title: '教育水平',
          dataIndex: 'educationalLevel',
          filterType: 'input'
        },
        {
          title: '单位性质',
          dataIndex: 'field11',
          filterType: 'input'
        },
        {
          title: '行业类型',
          dataIndex: 'field12',
          filterType: 'input'
        },
        {
          title: '职业',
          dataIndex: 'postName',
          filterType: 'input'
        },
        {
          title: '开票日期',
          dataIndex: 'invoiceDate',
          filterType: 'input',
          render: props => {
            if (props.row.invoiceDate && props.row.invoiceDate != '') {
              return <div>{formatdate(new Date(parseInt(props.row.invoiceDate)), 1)}</div>;
            }
          }
        },
        {
          title: '客户来源',
          dataIndex: 'customerFrom',
          filterType: 'input'
        },
        {
          title: '备注',
          dataIndex: 'remark',
          filterType: 'input'
        }
      ];
    },
    createContactsFormList() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          align: 'center',
          width: 70,
          fixed: 'left',
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        // {
        //   title: '操作',
        //   dataIndex: 'column-action',
        //   width: 50,
        //   fixed: 'left',
        //   render: props => {
        //     return (
        //       <div>
        //         <el-button size="mini" type="text" onClick={() => this.delContacts(props.row)}>
        //           删除
        //         </el-button>
        //       </div>
        //     );
        //   }
        // },
        {
          title: '主要联系人',
          dataIndex: 'filed17',
          filterType: 'input',
          showOverflowTooltip: true,
          editable: true,
          editType: 'radio',
          editRequired: true,
          rules: [{ required: true, message: '请选择主要联系人', trigger: 'blur' }]
        },
        {
          title: '联系人',
          dataIndex: 'field18',
          filterType: 'input',
          showOverflowTooltip: true,
          editable: true,
          editType: 'input',
          editRequired: true,
          rules: [{ required: true, message: '请填写联系人', trigger: 'blur' }]
        },
        {
          title: '联系手机',
          dataIndex: 'field19',
          filterType: 'input',
          showOverflowTooltip: true,
          editable: true,
          editType: 'input',
          editRequired: true,
          rules: [{ required: true, message: '请填写联系手机', trigger: 'blur' }]
        },
        {
          title: '联系固话',
          dataIndex: 'field20',
          filterType: 'input',
          editable: true,
          editType: 'input'
        },
        {
          title: '联系人类型',
          dataIndex: 'field21',
          filterType: 'select',
          showOverflowTooltip: true,
          editable: true,
          editType: 'select',
          itemList: this.createDictList('1004'),
          editRequired: true,
          rules: [{ required: true, message: '请选择联系人类型', trigger: 'blur' }]
        },
        {
          title: '关系',
          dataIndex: 'field22',
          filterType: 'input',
          showOverflowTooltip: true,
          editable: true,
          editType: 'input',
          itemList: this.createDictList('1004'),
          editRequired: true,
          rules: [{ required: true, message: '请选择关系', trigger: 'blur' }]
        },
        {
          title: '联系方式',
          dataIndex: 'field23',
          filterType: 'input',
          showOverflowTooltip: true,
          editable: true,
          editType: 'input',
          itemList: this.createDictList('1004'),
          editRequired: true,
          rules: [{ required: true, message: '请选择联系方式', trigger: 'blur' }]
        },
        {
          title: '联系信息',
          dataIndex: 'field24',
          filterType: 'input',
          showOverflowTooltip: true,
          editable: true,
          editType: 'input',
          editRequired: true,
          rules: [{ required: true, message: '请填写选项内容', trigger: 'blur' }]
        },
        {
          title: '联系时间',
          dataIndex: 'field25',
          filterType: 'input',
          showOverflowTooltip: true,
          editable: true,
          editType: 'date-picker',
          editRequired: true,
          rules: [{ required: true, message: '请选择联系时间', trigger: 'blur' }]
        },
        {
          title: '备注',
          dataIndex: 'field26',
          filterType: 'input',
          showOverflowTooltip: true,
          editable: true,
          editType: 'input',
          editRequired: true,
          rules: [{ required: true, message: '请选择备注', trigger: 'blur' }]
        }
      ];
    },
    addContacts() {
      let row = {
        index: this.contactsList.length
      };
      this.contactsList.push(row);
    },
    delContacts(row) {
      this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.contactsList.splice(row.$index, 1);
      });
    },
    closeDialog(type) {
      this.$emit('close', false, type);
    },
    formChangeHandle(val) {
      this.saveData = val;
    },
    saveDialog() {
      this.$refs.formPanel.SUBMIT_FORM();
      this.saveData.questionnaireId = this.returnVisitContent;
      this.saveData.careTargetId = this.careTargetId;
      this.saveData.nextCareDate = this.saveData.nextCareDate + ' 00:00:00';
      this.saveData.recordVersion = this.recordVersion;
      var questionnaireDom = document.getElementById('questionnaire');
      let questionnaireList = [];
      let questionnaireChildren = questionnaireDom.children;
      for (let i = 0; i < questionnaireChildren.length; i++) {
        let dom = questionnaireChildren[i];
        let questionnaire = {};
        questionnaire.questionnaireId = this.returnVisitContent;
        questionnaire.answerGroupId = dom.getAttribute('answerGroupId');
        questionnaire.answerQuestionnaireId = dom.getAttribute('answerQuestionnaireId');
        questionnaire.isMustFilled = dom.getAttribute('isMustFilled');
        questionnaire.questionContent = dom.getAttribute('questionContent');
        questionnaire.questionId = dom.getAttribute('id');
        questionnaire.questionName = dom.getAttribute('questionName');
        questionnaire.questionType = dom.getAttribute('questionType');
        if (dom.getAttribute('questionType') == 15711003) {
          questionnaire.value = dom.children[0].value;
        } else {
          let answerList = [];
          let answerIds = '';
          let answerChildren = dom.children[0].getElementsByTagName('input');
          for (let i = 0; i < answerChildren.length; i++) {
            let answer = {};
            let answerDom = answerChildren[i];
            answer.answer = answerDom.getAttribute('answer');
            answer.answerId = answerDom.getAttribute('answerId');
            answer.answerQuestionnaireId = answerDom.getAttribute('answerQuestionnaireId');
            answer.answerSort = answerDom.getAttribute('answerSort');
            answer.answerUsedId = answerDom.getAttribute('answerUsedId');
            if (answerDom.checked) {
              answer.isChecked = 10041001;
              answerIds += answerDom.getAttribute('answerId') + ',';
            } else {
              answer.isChecked = 10041002;
            }
            answerList.push(answer);
            questionnaire.answerList = answerList;
          }
          if (answerIds != '') {
            questionnaire.value = answerIds.substring(0, answerIds.length - 1);
          }
        }
        questionnaireList.push(questionnaire);
      }
      this.saveData.questionInfoVOList = questionnaireList;
      insertCareRecord(this.saveData).then(res => {
        if (res.resultCode == 200) {
          this.closeDialog('refresh');
        } else {
          this.$message.error('保存关爱记录失败');
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.dialog-form {
  width: 100%;
  margin: 0;
}

.el-checkbox-group .el-checkbox + .el-checkbox {
  margin: 0;
}

.box {
  border: 1px solid @borderColor;
  border-radius: @borderRadius;
  box-shadow: @boxShadow;
  padding: @modulePadding;
  margin-top: 20px;
}
</style>
